<template>
    <div class="l-login">
      <header-top></header-top>

      <!--注册框-->
      <div>
        <div class="l-form">
          <p class="l-title">东方城注册</p>


          <div class="l-filed">
            <label>手机号码</label>
            <input ref="phone" class="l-active" type="text" placeholder="请输入您的手机号码">
          </div>

          <div class="l-filed">
            <label>验证码</label>
            <input  class="l-verify" ref="verify" type="text" placeholder="请输入验证码">
            <div @touchstart="getVerify" class="l-verify-btn">{{text}}</div>
            <!--<img :src="menuIcon" alt="">-->
          </div>

          <div class="l-filed">
            <label>密码</label>
            <input ref="password" type="password" placeholder="请输入您的密码">
          </div>

          <div class="l-filed">
            <label>重复密码</label>
            <input ref="passwordAg" type="password" placeholder="请输入您的重复密码">
          </div>


          <div v-if="hidden" class="l-filed">
            <label>邀请码</label>
            <input ref="invitation" type="text" placeholder="请输入您的邀请码">
          </div>



            <div class="l-filed l-padding-left">
              <span data-name="login" @touchstart="router">返回登录</span>
              <span data-name="forget" @touchstart="router" class="l-router-active">忘记密码？</span>
            </div>

          <button @click="register" class="l-login-btn">立即注册</button>
        </div>
      </div>
    </div>
</template>

<script>
   import headerTop from '@/components/common/HeaderTop'
   import {mapActions} from 'vuex'
   import api from "@/api/base"
   import {Toast} from 'mint-ui'
    export default {
        name: "register",
        data () {
          return {
            handler: true,
            text: "获取验证码",
            hidden: false
          }
        },
        components: {
          headerTop,
          Toast
        },
        methods: {
          ...mapActions(['saveUserInfo']),
          register () {
            let data ={}
            data['phone'] = this.$refs.phone.value
            data['password'] = this.$refs.password.value
            data['passwordAg'] = this.$refs.passwordAg.value
            data['verify']  = this.$refs.verify.value

            if(!data['phone']) {
               Toast({
                 message: '手机号码不能为空',
                 position: 'middle',
                 duration: 1000,
                 className: 'l-mt-toast'
               })
            } else if (!/1[3,4,5,7,8][0-9]{9}/.test(data['phone'])) {
              Toast({
                message: '手机号码格式不正确',
                position: 'middle',
                duration: 1000
              })
            } else if (!data['verify']) {
              Toast({
                message: '验证码不能为空',
                position: 'middle',
                duration: 1000,
                className: 'l-mt-toast'
              })
            } else if (!data['password']) {
              Toast({
                message: '密码不能为空',
                position: 'middle',
                duration: 1000,
                className: 'l-mt-toast'
              })
            } else if (!data['passwordAg']) {
              Toast({
                message: '请确认密码',
                position: 'middle',
                duration: 1000,
                className: 'l-mt-toast'
              })
            }else if (data['passwordAg'] != data['password']) {
              Toast({
                message: '密码不一致',
                position: 'middle',
                duration: 1000,
                className: 'l-mt-toast'
              })
            } else {
              // ajax
              let formdate = new FormData
              formdate.append('phone', data['phone'])
              formdate.append('registerCheckCode', data['verify'])
              formdate.append('pwd', data['password'])
              api.post("user/orangeRegister", formdate).then(res => {
                console.log('register=', res)
                this.$router.push({name: 'account'})
              })
            }
          },
          router (e) {
            this.$router.push({name: e.target.dataset.name})
          },
          getVerify () {
            let data = {}
            data['phone'] = this.$refs.phone.value

            if(!data['phone']) {
              Toast({
                message: '手机号码不能为空',
                position: 'middle',
                duration: 1000,
                className: 'l-mt-toast'
              })
            } else if (!/1[3,4,5,7,8][0-9]{9}/.test(data['phone'])) {
              Toast({
                message: '手机号码格式不正确',
                position: 'middle',
                duration: 1000
              })
            } else {
              if (this.handler) {
                let  time = 50
                this.handler = false
                //ajax请求
                let formdata = new FormData
                formdata.append('phone', data['phone'])
                api.post("user/peCheckcode/code", formdata).then(()=>{})
                // 记时函数
                const codeTime = () => {
                  setTimeout( () => {
                    if (time >= 0) {
                      this.text = time + "s"
                      codeTime ()
                    } else {
                      this.text = "重新获取验证码"
                      this.handler = true
                    }
                    --time
                  }, 1000)
                }
                codeTime()
              }
            }


          }
        }
    }
</script>

<style lang="less" scoped>
  .l-login {
    background-image: url('../../static/img/bg_login_m.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100%;
    padding-bottom: 120px;
  }

  .l-form {
    width: 640px;
    border: 1px solid #fff; /*no*/
    margin: 120px auto 0 auto;
    padding: 0px 10px;
    color: #fff;

    .l-title {
      color: #fff;
      font-size: 40px;
      text-align: center;
      margin-top: 48px;
      margin-bottom: 48px;
    }
    .l-filed {
      margin-bottom: 20px;
      font-size: 32px;
      position: relative;

      &.l-padding-left {
        padding-left: 130px;
        width: 472px;
        display: flex;
        justify-content: space-between;
      }
      label {
        display: inline-block;
        width: 120px;
        height: 70px;
        line-height: 70px;
        font-size: 30px;
        text-align: justify;
      }

      span {
        display: inline-block;
        height: 60px;
        line-height: 60px;
      }

      input {
        outline:  none;
        border:  1px solid #fff;
        width: 472px;
        height: 70px;
        background-color: rgba(255,255,255, 0.1);
        color: #fff;
        padding: 10px;
        box-sizing: border-box;
        font-size: 24px;
      }
      .l-active {
        border: 1px solid #986d33; /*no*/
      }

      .l-verify {
        width: 240px;
      }

      .l-verify-btn {
        width: 240px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        display: inline-block;
        border-radius: 45px;
        background-color: #986d33;
      }

    }

    .l-login-btn {
      width: 472px;
      margin-left: 130px;
      height: 70px;
      line-height: 70px;
      border-radius: 45px; /*no*/
      outline: none;
      border: none;
      background-color: #996e35;
      color: #fff;
      margin-bottom: 48px;
      font-size: 100%;
    }
  }

  .l-router-active {
    color: #986d33;
  }



</style>
